<template>
	<div>
		<span :endTime="endTime">
			<slot>{{endTime}}</slot>
		</span>
	</div>
</template>

<script>
	export default {
		name: "CountDown",
		data() {
			return {
				content: '',
				endNewTime: '',
				currentTime: ''
			}
		},
		props: {
			endTime: {
				type: String,
				default: ''
			},
			endText
		},
		// computed:{
		//        // 定义方法，返回自己监听的值
		//        endNewTime(){
		//            return this.endNewTime
		//        }
		//    },
		watch: { //监听时间的变化
			endTime() {
				this.countdowm(this.endTime)
				// 清理旧的定时器
			// 	if (this.timer) {
			// 		clearInterval(this.timer);
			// 	}
			// 	// 当 endTime 变化时，重新开始倒计时
			// 	if (newVal) {
			// 		this.countdowm(newVal);
			// 	}
			}
		},

		mounted() {
			this.countdowm(this.endTime)
		},
		methods: {
			countdowm() {
				console.log(this.endNewTime)
				let self = this;
				let timer = setInterval(function() {
					let nowTime = new Date();
					let t = this.endNewTime
					if (t > 0) {
						let day = Math.floor(t / 86400000);
						let hour = Math.floor((t / 3600000) % 24);
						let min = Math.floor((t / 60000) % 60);
						let sec = Math.floor((t / 1000) % 60);
						hour = hour < 10 ? "0" + hour : hour;
						min = min < 10 ? "0" + min : min;
						sec = sec < 10 ? "0" + sec : sec;
						let format = '';
						if (day > 0) {
							format = `${day}天${hour}小时${min}分${sec}秒`;
						}
						if (day <= 0 && hour > 0) {
							format = `${hour}小时${min}分${sec}秒`;
						}
						if (day <= 0 && hour <= 0) {
							format = `${min}分${sec}秒`;
						}
						self.content = format;
					} else {
						clearInterval(timer);
						// self.content = self.endText;
					}
				}, 1000);
			}
		}
	}
</script>